<template>
  <div>
    <h1>个人简介</h1>
    <div>
      姓名:{{name}}
    </div>
    <div>
      年龄:{{age}}
    </div>
    <div>
      教师:{{teacher.name}}
    </div>
    <div>
      <button @click="updateInfo">修改</button>
    </div>
  </div>
</template>

<script lang='ts'>
import {ref,reactive,toRef,toRefs} from 'vue'
import {IStudent} from './types'
export default{
 setup(){
  let student=reactive<IStudent>({
    name:'杨航',
    age:18,
    teacher:{
      name:'Giles'
    }
  })
  const updateInfo:()=>void=()=>{
    student.name="杨洋",
    student.age=28,
    student.teacher.name="晓晓"
  }
  return{
    // name:toRef(student,'name'),
    // age:toRef(student,'age'),
    // tname:toRef(student.teacher,'name'),
    ...toRefs(student),
    updateInfo
  }
 }
}
</script>

<style lang='scss' scoped>
</style>